<template>
  <div class="div_1">
    <div class="div_2">
      <div>
        <h1 class="h1_1">注册账号</h1>
        <div class="div_3">
          <!--<div class="div_4">
            <div>
              <div class="div_5">
                <div class="div_6">
                  <div class="div_7">国家/地区
                    </div>
                  <div class="div_8">中国</div>
                </div>
              </div>
            </div>
          </div>
          <div class="div_9">成功注册帐号后，国家/地区将不可更改</div>-->
          <div class="div_10">
            <div>
              <div class="div_11">
                <div class="div_12">
                  <div class="div_13">

                    <input autocomplete="off" class="input_1" v-model="userName" v-on:input="zcif()"
                           @keyup="delete zcif()" placeholder="请输入用户名" name="userName" type="text">
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="div_10">
            <div>
              <div class="div_11">
                <div class="div_12">
                  <div class="div_13">
                    <input autocomplete="off" class="input_1" v-model="uPhonenum" v-on:input="zcif()"
                           @keyup="delete zcif()" placeholder="请输入手机号码或邮箱" name="account" type="text">
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!--          <div class="div_14">-->
          <!--            <div>-->
          <!--              <div class="div_15">-->
          <!--                <div class="div_16">-->
          <!--                  <div class="div_17">-->
          <!--                    <input autocomplete="off" class="input_2" disabled="" placeholder="请输入验证码" maxlength="6" name="verificationCode" type="text" value="">-->
          <!--                  </div>-->
          <!--                </div>-->
          <!--                <div class="div_18">获取验证码</div>-->
          <!--              </div>-->
          <!--            </div>-->
          <!--          </div>-->
          <div class="div_19">
            <div>
              <div class="div_20">
                <div class="div_21">
                  <input autocomplete="new-password" class="input_3" v-model="userPwd" v-on:input="zcif()"
                         @keyup="delete zcif()" name="password" placeholder="请输入密码" type="password">
                </div>
                <div class="div_22">
                  <span class="span_1" @click="clickShowPwd()"></span>
                </div>
              </div>
            </div>
          </div>
          <div class="div_23">密码由 6-16 位数字、字母或符号组成</div>
          <span class="backLog" @click="backLog()">返回登录</span>
          <div class="div_24" :class="inputStyle?inputStyle1:inputStyle0" @click="signClick()">注册</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {requestSign} from "../../network/home";
  import {mapActions} from "vuex"

  export default {
    name: "Sign",
    data() {
      return {

        userName: '',
        uPhonenum: '',
        userPwd: '',

        inputStyle: false,
        inputStyle0: 'inputStyle0',
        inputStyle1: 'inputStyle1',
        isShowPwd: false,

      }
    },
    computed: {},
    methods: {
      ...mapActions({
        "addData": "UserMsg/addMsg",
        "updateLogStatus": "UserMsg/updateLogStatus"
      }),
      backLog() {//点击返回登录按钮
        this.$router.push("/log")
      },
      clickShowPwd() {//点击隐藏或者显示密码
        if (!this.isShowPwd) {
          document.getElementsByClassName("input_3")[0].type = "text";
          this.isShowPwd = true;
        } else if (this.isShowPwd) {
          document.getElementsByClassName("input_3")[0].type = "password";
          this.isShowPwd = false;
        }
      },
      //登录按钮效果实现
      zcif() {
        if (this.uPhonenum != '' && this.userPwd != '' && this.userName != '') {
          this.$data.inputStyle = true;
        } else {
          this.$data.inputStyle = false;
        }
      },
      /*注册点击事件*/
      signClick() {
        if (this.inputStyle == true) {
          requestSign(this.userName, this.uPhonenum, this.userPwd)
            .then(success => {
              this.$message.success("恭喜，注册成功！");
              this.$router.push({path: "/home"})
              //添加数据到vuex
              this.addData(success.data);
              //修改登录状态
              this.updateLogStatus(true);
            }, fail => {
              this.$message.error("抱歉，注册失败，请一直尝试！");
            })
        }
      }
    }
  }
</script>

<style>
  .backLog {
    font-size: 12px;
    margin-left: 35%;
    cursor: pointer;
  }

  .div_1 {
    background-color: white;
  }

  .inputStyle0 {
    opacity: .3;
    cursor: not-allowed;
  }

  .inputStyle1 {
    cursor: pointer;
  }

  html {
    background-color: white;
  }

  .div_24 {
    background-color: #2ad181;
    width: 100px;
    height: 39px;
    color: #fff;
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
    margin: .75rem auto 0;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    border-radius: 9px;
    font-size: 15px;
    font-weight: 500;
    height: 48px;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    transition: background-color .4s;
    box-sizing: border-box;
  }

  .div_23 {
    display: inline;
    font-size: .33333rem;
    color: rgba(0, 0, 0, .3);

    line-height: .47222rem;
    padding-bottom: .5rem;

    text-align: left;
  }

  .span_1 {
    background-image: url("~assets/img/login/img_1.png");

    width: 24px;
    height: 24px;
    background-image: url();
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: 100% 100%;
  }

  .div_22 {
    height: 45px;
    box-sizing: border-box;
    width: 35px;
    padding-right: 11px;
    margin-left: -4px;
    cursor: pointer;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
  }

  .div_21 {
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;

    -webkit-flex: 1 1;
    -ms-flex: 1 1;
    flex: 1 1;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }

  .div_20 {
    -webkit-flex: 1 1;
    -ms-flex: 1 1;
    flex: 1 1;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;

    width: 100%;
    height: 45px;
    background: #f7f7f7;
    border-radius: 9px;
    overflow: hidden;
  }

  .div_19 {
    padding-bottom: 15px;
  }

  .div_18 {
    font-size: 12px;
    margin-left: 9px;
    white-space: nowrap;
    min-width: 90px;
    height: 45px;
    padding: 0 8px;

    background-color: rgba(0, 0, 0, .15);
    color: #fff;
    cursor: not-allowed;
    -webkit-transform: scaleX(1);
    transform: scaleX(1);

    background-color: #2ad181;
    color: #fff;

    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    border-radius: 9px;
    font-weight: 500;
    height: 48px;
    cursor: pointer;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    transition: background-color .4s;
    box-sizing: border-box;
  }

  .input_2, .input_3 {
    color: hsla(0, 0%, 69.8%, .5);

    background: none;
    border-radius: 9px;
    -webkit-appearance: none;
    appearance: none;
    border: none;
    box-shadow: none;
    -webkit-user-select: text;
    -ms-user-select: text;
    user-select: text;
    width: 100%;
    height: 45px;
    outline: none;
    box-sizing: border-box;
    display: block;
    padding: 10px 15px;
    font-size: 12px;
    color: #000;
    line-height: 25px;
    -webkit-flex: 1 1;
    -ms-flex: 1 1;
    flex: 1 1;
  }

  .div_17 {
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-flex: 1 1;
    -ms-flex: 1 1;
    flex: 1 1;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;

  }

  .div_16 {
    -webkit-flex: 1 1;
    -ms-flex: 1 1;
    flex: 1 1;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;

    width: 100%;
    height: 45px;
    background: #f7f7f7;
    border-radius: 9px;
    overflow: hidden;
  }

  .div_15 {
    -webkit-flex: 1 1;
    -ms-flex: 1 1;
    flex: 1 1;
    width: 100%;
    position: relative;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }

  .div_14 {
    padding-bottom: .27778rem;
  }

  .input_1 {
    background: none;
    border-radius: 9px;
    -webkit-appearance: none;
    appearance: none;
    border: none;
    box-shadow: none;
    -webkit-user-select: text;
    -ms-user-select: text;
    user-select: text;
    width: 100%;
    height: 45px;
    outline: none;
    box-sizing: border-box;
    display: block;
    padding: 10px 15px;
    font-size: 12px;
    color: #000;
    line-height: 25px;
    -webkit-flex: 1 1;
    -ms-flex: 1 1;
    flex: 1 1;
  }

  input {
    -webkit-writing-mode: horizontal-tb !important;
    text-rendering: auto;
    /*color: -internal-light-dark(black, white);*/
    letter-spacing: normal;
    word-spacing: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    display: inline-block;
    text-align: start;
    appearance: auto;
    /*background-color: -internal-light-dark(rgb(255, 255, 255), rgb(59, 59, 59));*/
    -webkit-rtl-ordering: logical;
    cursor: text;
    margin: 0em;
    font: 400 13.3333px Arial;
    padding: 1px 2px;
    border-width: 2px;
    border-style: inset;
    /*border-color: -internal-light-dark(rgb(118, 118, 118), rgb(133, 133, 133));*/
    border-image: initial;
    border-radius: 2px;
  }

  .div_13 {
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;

    -webkit-flex: 1 1;
    -ms-flex: 1 1;
    flex: 1 1;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }

  .div_12 {
    -webkit-flex: 1 1;
    -ms-flex: 1 1;
    flex: 1 1;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;

    width: 100%;
    height: 45px;
    background: #f7f7f7;
    border-radius: 9px;
    overflow: hidden;
  }

  .div_11 {
    -webkit-flex: 1 1;
    -ms-flex: 1 1;
    flex: 1 1;
    width: 100%;
    position: relative;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }

  .div_10 {
    padding-bottom: 15px;
  }

  .div_9 {
    font-size: .33333rem;
    color: rgba(0, 0, 0, .3);
    line-height: 27px;
    padding-bottom: .5rem;
    text-align: left;
  }

  .div_7:after {
    content: "";
    height: .33333rem;
    border-right: 1px solid rgba(0, 0, 0, .1);
    position: absolute;
    right: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
  }

  .div_6:after {
    background-image: url("~assets/img/login/img.png");
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: auto 100%;
    width: 14px;
    height: 24px;
    transition: -webkit-transform .2s ease-in;
    transition: transform .2s ease-in;
    transition: transform .2s ease-in, -webkit-transform .2s ease-in;
    position: absolute;
    content: "";
    right: .41667rem;
    top: 35%;
    margin-top: -.33333rem;
  }

  .div_8 {
    font-size: .33333rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .div_7 {
    padding: 10px 15px;
    font-size: .33333rem;
    white-space: nowrap;
    position: relative;
    margin-right: .41667rem;
  }

  .div_6 {
    height: 45px;
    background: #f7f7f7;
    border-radius: .25rem;
    overflow: hidden;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    padding-right: .77778rem;

    -webkit-flex: 1 1;
    -ms-flex: 1 1;
    flex: 1 1;
    width: 100%;
    position: relative;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }

  .div_5 {
    -webkit-flex: 1 1;
    -ms-flex: 1 1;
    flex: 1 1;
    width: 100%;
    position: relative;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }

  .div_4 {
    padding-bottom: .27778rem;
  }

  .div_3 {
    display: block;
  }

  div {
    display: block;
  }

  h1 {
    display: block;
    font-size: 2em;
    margin-block-start: 0.67em;
    margin-block-end: 0.67em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
  }

  .div_1 {
    width: 818.4px;
    height: 587.6px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -409.2px;
    margin-top: -293.8px;
    flex-shrink: 0;
    flex: 1 1 auto;
  }

  .div_2 {
    width: 400px;
    margin: 0 auto;
    padding-top: 80px;
  }

  .h1_1 {
    padding: 0 0 30px;
    margin: 0;
    line-height: 1rem;
    font-weight: 500;
    text-align: center;
  }
</style>
